<template>
    <div class="tab">
        <el-tabs type="demo-tabs">
            <el-tab-pane label="直播互动">
                <div class="text">
                    <el-input style="width: 16vw" placeholder="请文明发言" />
                    <svg t="1712498457641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4231" width="32" height="32"><path d="M510.3616 90.4704c-232.0896 0-420.864 188.8256-420.864 420.864 0 232.0896 188.8256 420.864 420.864 420.864s420.864-188.8256 420.864-420.864-188.7744-420.864-420.864-420.864z m0 800.8192c-209.5104 0-379.904-170.4448-379.904-379.904 0-209.5104 170.4448-379.904 379.904-379.904 209.5104 0 379.904 170.4448 379.904 379.904 0 209.4592-170.4448 379.904-379.904 379.904z" fill="#cdcdcd" p-id="4232"></path><path d="M259.4816 439.8592l422.5024-103.5776c20.4288-5.0176 37.5296 15.9744 28.4672 34.9696L522.24 766.4128c-9.728 20.3776-39.3728 18.432-46.2848-3.072l-48.0256-149.4016a25.06752 25.06752 0 0 1 5.2224-24.3712l82.1248-91.0336c5.0176-5.5808-1.6896-13.9264-8.192-10.0864l-108.9536 63.488a24.9856 24.9856 0 0 1-24.6272 0.3072L253.3888 485.9392c-19.9168-11.008-15.9744-40.704 6.0928-46.08z" fill="#cdcdcd" p-id="4233"></path></svg>
                </div>
            </el-tab-pane>
            <el-tab-pane label="活动议程">
                <p style="color: aliceblue;">
                    &nbsp; &nbsp; &nbsp; 为探索数字时代高质量发展的安全之道，2022年第十届西湖论剑·网络安全大会拟于2022年7月2日-3日举办。
                本届大会将邀请政府主管单位领导、知名专家学者、网络安全从业人员，分析现状、研判趋势，探讨“构建安全可信数字世界”的可行路径。
                大会将设立开幕式及全体大会、杭州主论坛、北京主论坛、平行论坛等多个环节，共话新时代安全新议题，共推数字世界高质量构建和发展。
                </p>
            </el-tab-pane>
            <el-tab-pane label="论坛推荐">
                <Card v-for="item in 3" :key="item" class="acard"/>
            </el-tab-pane>
            <el-tab-pane label="会议推荐">
                <Card v-for="item in 3" :key="item" class="acard"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import Card from './card/index.vue'
</script>

<style scoped lang="scss">
.tab{
    width: 100%;
    height: 100%;
    ::v-deep(.el-tabs__item){
        font-size: 1.2vw;
        //background-color: #202124;
        color: #e6e6e6;
    }

    ::v-deep .el-tabs__item.is-active {
        color: #2997ff;//选中
        opacity: 1;
    }
 
    ::v-deep .el-tabs__item:hover {
        color: #2997ff;//悬浮
        cursor: pointer;
        opacity: 1;
    }
    ::v-deep .el-tabs__content{
        background-color: #202124;
        //background-color: aliceblue;
        width: 100%;
        height: 100%;
    }
    ::v-deep .el-tabs__nav-wrap::after {
        position: static !important;
    }
    ::v-deep .el-tabs__active-bar {
        background-color: #2997ff;
    }
    .acard{
        width: 100%;
        height: 5.5vw;
    }
    .text{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 2.5vw;
        background-color: #202124;
        margin-top:27vw;
        svg{
            margin-left: 1vw;
        }
    }


}
</style>